<template>
  <div class="test-question">
    <!-- 内容 -->
    <el-row>
      <!-- 左侧折线图 -->
      <el-col :span="16">
        <div class="chart">
          <div class="trendChart" ref="trendTestChart"></div>
        </div>
      </el-col>
      <!-- 右侧排名区域 -->
      <el-col :span="8">
        <h4>学科试题数量排名</h4>
        <ul>
          <li>
            <el-row :key="index" v-for="(item, index) in testList">
              <el-col :span="3">
                <div class="circular" :class="{ light: index + 1 > 3 }">
                  {{ index + 1 }}
                </div>
              </el-col>
              <el-col :span="16">{{ item.subjectName }}</el-col>
              <el-col :span="5">{{ item.totals }}</el-col>
            </el-row>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'testQuestion',
  props: {
    channel: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      // 学科列表
      testList: [
        { subjectName: '前端', totals: '5,234' },
        { subjectName: 'java', totals: '3,210' },
        { subjectName: '大数据', totals: '1,294' },
        { subjectName: 'c++', totals: '1,001' },
        { subjectName: 'UI', totals: '934' },
        { subjectName: 'php', totals: '856' },
        { subjectName: 'python', totals: '403' },
        { subjectName: '测试', totals: '122' }
      ],
      myChart: null
    }
  },
  mounted() {
    const trendTestChart = this.$refs.trendTestChart
    this.myChart = this.$echarts.init(trendTestChart)
    this.getEcharts()
  },
  created() {
  },
  methods: {
    getEcharts() {
      // 准备数据和配置项
      // const data = {
      //   test1: [100, 120, 161, 134, 105, 160, 165, 100, 120, 161, 134, 105],
      //   test2: [200, 192, 120, 144, 160, 130, 140, 105, 160, 165, 100, 120]
      // }
      const trendTest = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          top: '10%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ],
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#5ab1ef'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#5ab1ef'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['#fff', '#f8f8f8']
            }
          }
        },
        series: [
          {
            name: '试题数量',
            data: this.channel,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#5ab1ef',
                lineStyle: {
                  color: '#3b8afa'
                }
              }
            }
          }
        ]
      }
      this.myChart.setOption(trendTest)
    }
  },
  // 数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
  watch: {
    // 观察option中data的变化
    channel: {
      handler(newVal, oldVal) {
        this.getEcharts()
      },
      deep: true // 对象内部属性的监听，关键。
    }
  }
}
</script>

<style lang="less" scoped>
.test-question {
  display: flex;
  flex-direction: row;
  .el-row {
    width: 100%;
    .el-col {
      padding: 0 10px;
      .chart {
        height: 300px;
        .trendChart {
          width: 100%;
          height: 100%;
        }
      }
      h4 {
        color: #000;
        font-weight: 500;
        margin: 20px 0;
      }
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        .el-row {
          margin-bottom: 10px;
          .circular {
            width: 20px;
            height: 20px;
            background-color: #314659;
            color: #fff;
            text-align: center;
            font-size: 12px;
            line-height: 20px;
            font-weight: 600;
            border-radius: 50%;
          }
          .light {
            background-color: #f5f5f5;
            color: rgba(0, 0, 0, 0.65);
          }
        }
      }
    }
  }
}
</style>
